<template>
    <div id="userDiv">
        <div class="operationDiv">
            <div class="labDiv">课程名字</div>
            <div class="serarchDiv">
                <el-input v-model="searchInputCourseName" placeholder="请输入内容"></el-input>
            </div>
            <div class="labDiv">课程老师</div>
            <div class="serarchDiv">
                <el-select v-model="inputTeacherIdvalue" placeholder="请选择" clearable>
                    <el-option v-for="item in teacherList" :key="item.teacherBasdInfo.id"
                        :label="item.teacherBasdInfo.name" :value="item.teacherBasdInfo.id">
                    </el-option>
                </el-select>
                <!-- {{ inputTeacherIdvalue }} -->
            </div>

            <div class="serarchDiv">
                <!-- <el-button type="primary" style="width: 100px;">重置搜索</el-button> -->
                <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
            </div>
        </div>
        <div class="addDiv">
            <div class="addItemDiv"><el-button type="primary" style="width: 100px;" @click="openAddDiv">新增课程</el-button>
            </div>
        </div>
        <div class="tableDiv">
            <el-table ref="multipleTable" :data="courseList" tooltip-effect="dark" style="width: 100%" border
                :header-cell-style="{ 'background-color': '#409EFF', 'color': '#fff' }"
                @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column prop="id" label="课程ID" width="80">
                </el-table-column>
                <el-table-column label="课程封面" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <el-image :src="scope.row.tabularchart" style="width: 200px; height: 100px"
                            :fit="fit"></el-image>
                    </template>
                </el-table-column>
                <el-table-column prop="coursename" label="课程名称" width="180">
                </el-table-column>
                <el-table-column prop="courseTeacher.name" label="课程教师" show-overflow-tooltip width="120">
                </el-table-column>
                <el-table-column prop="courseintroduce" label="课程简介" width="220">
                </el-table-column>
                <el-table-column prop="coursetime" label="课程时长" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="coursePrice.discount" label="课程价格" width="120">
                </el-table-column>
                <el-table-column prop="coursePrice.discount" label="操作" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <el-tooltip content="编辑" placement="top"><el-button type="primary" icon="el-icon-edit" @click="openUpdateDiv(scope.row)"></el-button></el-tooltip>
                        <el-tooltip content="查看详情" placement="top"><el-button type="primary" @click="openMoreDiv(scope.row)">...</el-button></el-tooltip>
                        <el-tooltip content="删除" placement="top"><el-button type="primary" icon="el-icon-delete" @click="deleteCourse(scope.row)"></el-button></el-tooltip>   
                    </template>
                </el-table-column>
            </el-table>

            <div class="pageDiv">
                <el-pagination background layout="prev, pager, next" :page-size="pageSize" :total="total" :current-page="pageNum"
                    @current-change="handleCurrentChange">
                </el-pagination>
            </div>

        </div>
        <div class="addDiv">
            <el-dialog title="新增课程" :visible.sync="dialogFormVisible">
                <div class="addTableDiv">
                    <div class="addTableItem">
                        <div class="addTableItemLabe">课程名称</div>
                        <div class="addTableItemInput"><el-input v-model="addInfo.courseName"
                                placeholder="请输入内容"></el-input>
                        </div>
                    </div>
                    <div class="addTableItem">
                        <div class="addTableItemLabe">课程老师</div>
                        <div class="addTableItemInput">
                            <el-select v-model="addInfo.teacher_id" placeholder="请选择" clearable>
                                <el-option v-for="item in addTeacherList" :key="item.teacherBasdInfo.id"
                                    :label="item.teacherBasdInfo.name" :value="item.teacherBasdInfo.id">
                                </el-option>
                            </el-select>
                        </div>
                    </div>
                    <div class="addTableItem">
                        <div class="addTableItemLabe">课程封面</div>
                        <el-upload name="file" action="http://localhost:8080//upload2233" list-type="picture-card"
                            :auto-upload="true" :on-success="getUploadImageUrl">
                            <i slot="default" class="el-icon-plus"></i>
                            <div slot="file" slot-scope="{file}">
                                <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
                                <span class="el-upload-list__item-actions">
                                    <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                                        <i class="el-icon-zoom-in"></i>
                                    </span>
                                    <span v-if="!disabled" class="el-upload-list__item-delete"
                                        @click="handleDownload(file)">
                                        <i class="el-icon-download"></i>
                                    </span>
                                    <span v-if="!disabled" class="el-upload-list__item-delete"
                                        @click="handleRemove(file)">
                                        <i class="el-icon-delete"></i>
                                    </span>
                                </span>
                            </div>
                        </el-upload>
                        <el-dialog :visible.sync="dialogVisible">
                            <img width="100%" :src="dialogImageUrl" alt="">
                        </el-dialog>
                    </div>
                    <div class="addTableItem">
                        <div class="addTableItemLabe">课程时长</div>
                        <div class="addTableItemInput"><el-input v-model="addInfo.couseTime"
                                placeholder="请输入内容"></el-input>
                        </div>
                    </div>
                    <div class="addTableItem">
                        <div class="addTableItemLabe">课件数量</div>
                        <div class="addTableItemInput"><el-input v-model="addInfo.courseMount"
                                placeholder="请输入内容"></el-input>
                        </div>
                    </div>
                    <div class="addTableItem">
                        <div class="addTableItemLabe">课程简介</div>
                        <div class="addTableItemInput"><el-input v-model="addInfo.courseIntroduce"
                                placeholder="请输入内容"></el-input></div>
                    </div>
                    <div class="addTableItem">
                        <div class="addTableItemLabe">适用人群</div>
                        <div class="addTableItemInput"><el-input v-model="addInfo.applicablePopulation"
                                placeholder="请输入内容"></el-input></div>
                    </div>
                    <div class="addTableItem">
                        <div class="addTableItemLabe">订阅须知</div>
                        <div class="addTableItemInput"><el-input v-model="addInfo.subscriptionNotice"
                                placeholder="请输入内容"></el-input></div>
                    </div>

                </div>

                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="addCourse">确 定</el-button>
                </div>
            </el-dialog>
        </div>

        <div class="updateDiv">
            <el-dialog title="编辑课程详情" :visible.sync="dialogFormVisible2">
                <div class="addTableDiv">
                    <div class="addTableItem">
                        <div class="addTableItemLabe">课程名称</div>
                        <div class="addTableItemInput"><el-input v-model="updateInfo.courseName"
                                placeholder="请输入内容"></el-input>
                        </div>
                    </div>
                    <div class="addTableItem">
                        <div class="addTableItemLabe">课程老师</div>
                        <div class="addTableItemInput">
                            <el-select v-model="updateInfo.teacher_id" placeholder="请选择" clearable>
                                <el-option v-for="item in addTeacherList" :key="item.teacherBasdInfo.id"
                                    :label="item.teacherBasdInfo.name" :value="item.teacherBasdInfo.id">
                                </el-option>
                            </el-select>
                        </div>
                    </div>
                    <div class="addTableItem">
                        <div class="addTableItemLabe">课程封面</div>
                        <el-upload name="file" action="http://localhost:8080//upload2233" list-type="picture-card"
                            :auto-upload="true" :on-success="getUploadImageUrl2">
                            <i slot="default" class="el-icon-plus"></i>
                            <div slot="file" slot-scope="{file}">
                                <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
                                <span class="el-upload-list__item-actions">
                                    <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                                        <i class="el-icon-zoom-in"></i>
                                    </span>
                                    <span v-if="!disabled" class="el-upload-list__item-delete"
                                        @click="handleDownload(file)">
                                        <i class="el-icon-download"></i>
                                    </span>
                                    <span v-if="!disabled" class="el-upload-list__item-delete"
                                        @click="handleRemove(file)">
                                        <i class="el-icon-delete"></i>
                                    </span>
                                </span>
                            </div>
                        </el-upload>
                        {{ updateInfo.tabularChar }}
                        <el-dialog :visible.sync="dialogVisible">
                            <img width="100%" :src="dialogImageUrl" alt="">
                        </el-dialog>
                    </div>
                    <div class="addTableItem">
                        <div class="addTableItemLabe">课程时长</div>
                        <div class="addTableItemInput"><el-input v-model="updateInfo.couseTime"
                                placeholder="请输入内容"></el-input>
                        </div>
                    </div>
                    <div class="addTableItem">
                        <div class="addTableItemLabe">课件数量</div>
                        <div class="addTableItemInput"><el-input v-model="updateInfo.courseMount"
                                placeholder="请输入内容"></el-input>
                        </div>
                    </div>
                    <div class="addTableItem">
                        <div class="addTableItemLabe">课程简介</div>
                        <div class="addTableItemInput"><el-input v-model="updateInfo.courseIntroduce"
                                placeholder="请输入内容"></el-input></div>
                    </div>
                    <div class="addTableItem">
                        <div class="addTableItemLabe">适用人群</div>
                        <div class="addTableItemInput"><el-input v-model="updateInfo.applicablePopulation"
                                placeholder="请输入内容"></el-input></div>
                    </div>
                    <div class="addTableItem">
                        <div class="addTableItemLabe">订阅须知</div>
                        <div class="addTableItemInput"><el-input v-model="updateInfo.subscriptionNotice"
                                placeholder="请输入内容"></el-input></div>
                    </div>

                </div>

                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible2 = false">取 消</el-button>
                    <el-button type="primary" @click="updateCourseInfo">提交修改</el-button>
                </div>
            </el-dialog>
        </div>

        <div class="MoreDiv">
            <el-dialog title="课程详情" :visible.sync="dialogFormVisible3">

                <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane label="教师详情" name="first">

                        <div class="addTableItem">
                            <div class="addTableItemLabe">教师名称</div>
                            <div class="addTableItemInput"><el-input v-model="this.moreInfo.courseTeacher.name"
                                    :disabled="true" placeholder="请输入内容"></el-input>
                            </div>
                        </div>

                        <div class="addTableItem">
                            <div class="addTableItemLabe">教师照片</div>
                            <el-image style="width: 100px; height: 100px" :src="this.moreInfo.courseTeacher.image"
                                :fit="fit"></el-image>
                        </div>
                        <div class="addTableItem">
                            <div class="addTableItemLabe">教师地址</div>
                            <div class="addTableItemInput"><el-input v-model="this.moreInfo.courseTeacher.address"
                                    :disabled="true" placeholder="请输入内容"></el-input>
                            </div>
                        </div>
                        <div class="addTableItem">
                            <div class="addTableItemLabe">教师级别</div>
                            <div class="addTableItemInput"><el-input v-model="this.moreInfo.courseTeacher.levelname"
                                    :disabled="true" placeholder="请输入内容"></el-input>
                            </div>
                        </div>
                        <div class="addTableItem">
                            <div class="addTableItemLabe">教师简介</div>
                            <div class="addTableItemInput"><el-input v-model="this.moreInfo.courseTeacher.intro"
                                    :disabled="true" placeholder="请输入内容"></el-input>
                            </div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="热门评论" name="second">热门评论
                        <el-table :data="CourseMarkList" style="width: 100%">
                            <el-table-column prop="createtime" label="日期" width="180">
                            </el-table-column>
                            <el-table-column prop="username" label="用户" width="180">
                            </el-table-column>
                            <el-table-column prop="content" label="内容">
                            </el-table-column>
                            <el-table-column prop="content" label="评分">
                                <template slot-scope="scope">
                                    <el-rate v-model="scope.row.grade"></el-rate>
                                </template>
                            </el-table-column>

                        </el-table>
                    </el-tab-pane>
                    <el-tab-pane label="设置价格" name="third">设置价格
                        <div class="addTableItem">
                            <div class="addTableItemLabe">标价</div>
                            <div class="addTableItemInput">
                                <el-input v-model="moreInfo.coursePrice.price" placeholder="请设置标价"></el-input>
                            </div>
                        </div>
                        <div class="addTableItem">
                            <div class="addTableItemLabe">售价</div>
                            <div class="addTableItemInput"><el-input v-model="moreInfo.coursePrice.discount"
                                    placeholder="请设置售价"></el-input>
                            </div>
                        </div>
                        <div class="addTableItem">
                            <el-button type="primary" @click="setCoursePrice">修改价格</el-button>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="课程流量" name="fourth">课程流量
                        <div class="addTableItem">
                            <div class="addTableItemLabe">热度</div>
                            <div class="addTableItemInput"><el-input v-model="moreInfo.courseHot.hot"
                                    :disabled="true" placeholder="请输入内容"></el-input>
                            </div>
                        </div>
                        <div class="addTableItem">
                            <div class="addTableItemLabe">好评率</div>
                            <div class="addTableItemInput"><el-input v-model="moreInfo.courseHot.rate"
                                    :disabled="true" placeholder="请输入内容"></el-input>
                            </div>
                        </div>
                    </el-tab-pane>
                </el-tabs>
                <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="closeMore">关闭</el-button>
                </div>
            </el-dialog>
        </div>

    </div>
</template>

<script>
export default {
    data() {
        return {
            a:1,
            activeName: 'first',
            dialogImageUrl: '',
            dialogVisible: false,
            disabled: false,
            dialogFormVisible3: false,
            dialogFormVisible2: false,
            dialogFormVisible: false,
            total: 10,//查询到的数据总数
            pageNum: 1,//当前页码
            pageSize: 4,
            pages:0,
            courseList: [],
            teacherList: [],
            addTeacherList: [],
            updateTeacherList: [],
            searchInputCourseName: '',
            searchInputTime: '',
            searchInputTeacherName: '',
            multipleSelection: [],
            inputTeacherIdvalue: "",
            addInfo: {
                courseName: "",
                teacher_id: 0,
                tabularChar: "",
                couseTime: "",
                courseMount: "",
                courseIntroduce: "",
                applicablePopulation: "",
                subscriptionNotice: ""
            },
            updateInfo: {
                courseId: "",
                courseName: "",
                teacher_id: 0,
                tabularChar: "",
                couseTime: "",
                courseMount: "",
                courseIntroduce: "",
                applicablePopulation: "",
                subscriptionNotice: ""
            },
            moreInfo: {
                courseTeacher: {
                    name: "",
                    image: "",
                    address: "",
                    levelname: "",
                    intro: ""
                },
                coursePrice:{
                    courseId:-1,
                    price:-1,
                    discount:-1
                },
                courseHot:{
                    hot:"",
                    rate:""
                }
            },
            CourseProblemList: [],
            CourseMarkList: []
        }
    },
    created() {
        this.getcourseList(this.pageNum);
        this.getTeacherList();

    },
    methods: {
        handleClick(tab, event) {
            console.log(tab, event);
        },
        // 文件上传
        handleRemove(file) {
            console.log(file);
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        handleDownload(file) {
            console.log(file);
        },

        // 获取上传图片的url 文件上传成功的回调函数 文件上传成功自动执行 
        getUploadImageUrl(resp) {
            console.log(resp.data);
            this.addInfo.tabularChar = resp.data
        },

        async setCoursePrice(){
            console.log("999==>"+this.moreInfo.coursePrice.courseId);
            
            await this.axios.get("http://localhost:8080/course/setprice", {
                params: {
                    courseId:this.moreInfo.courseId,
                    price:this.moreInfo.coursePrice.price,
                    discount:this.moreInfo.coursePrice.discount
                }
            }).then((res) => {
                this.$message({
                    message: '修改成功',
                    type: 'success'
                });
            }).catch((err) => {
                console.log(err);
                console.log("修改失败");
            })
            this.pageNum = 1
            this.getcourseList(this.pageNum, this.searchInputCourseName, this.inputTeacherIdvalue)
        },

        getUploadImageUrl2(resp) {
            console.log(resp.data);
            this.updateInfo.tabularChar = resp.data
        },
        openMoreDiv(row) {
            this.dialogFormVisible3 = true
            console.log("morerow");
            
            console.log(row);
            this.moreInfo.courseId=row.id
            this.moreInfo.courseTeacher.name = row.courseTeacher.name
            this.moreInfo.courseTeacher.address = row.courseTeacher.address
            this.moreInfo.courseTeacher.image = row.courseTeacher.image
            this.moreInfo.courseTeacher.levelname = row.courseTeacher.levelname
            this.moreInfo.courseTeacher.intro = row.courseTeacher.intro
            this.moreInfo.coursePrice.courseId=row.id
            this.moreInfo.coursePrice.price=row.coursePrice.price
            this.moreInfo.coursePrice.discount=row.coursePrice.discount
            this.moreInfo.courseHot.hot=row.courseHot.hot
            this.moreInfo.courseHot.rate=row.courseHot.goodrate
            // 获取课程问题信息

            this.axios.get("http://localhost:8080/course/problem", {
                params: {
                    i: row.id
                }
            }).then((res) => {
                this.CourseProblemList = res.data.data
                console.log(this.CourseProblemList);

            }).catch((err) => {
                console.log(err);
                console.log("请求失败");
            })

            this.axios.get("http://localhost:8080/course/marks", {
                params: {
                    i: row.id
                }
            }).then((res) => {
                this.CourseMarkList = res.data.data
                console.log(this.CourseMarkList);

            }).catch((err) => {
                console.log(err);
                console.log("请求失败");
            })

        },

        closeMore(){
            console.log("点击率close");
            
            this.dialogFormVisible3 = false

            console.log("hhhh");
            
        },
        openAddDiv() {
            this.dialogFormVisible = true
        },

        openUpdateDiv(row) {
            console.log(row);
            this.dialogFormVisible2 = true
            this.updateInfo.courseId = row.id
            this.updateInfo.courseName = row.coursename
            this.updateInfo.teacher_id = row.teacherId
            this.updateInfo.tabularChar = row.tabularchar
            this.updateInfo.couseTime = row.coursetime
            this.updateInfo.courseMount = row.coursemount
            this.updateInfo.courseIntroduce = row.courseintroduce
            this.updateInfo.applicablePopulation = row.applicablepopulation
            this.updateInfo.subscriptionNotice = row.subscriptionnotice
            console.log(this.updateInfo.courseId);
            console.log(this.updateInfo.courseName);

        },

        async updateCourseInfo() {

            await this.axios.put("http://localhost:8080/course/update", null, {
                params:
                {
                    id: this.updateInfo.courseId,
                    coursename: this.updateInfo.courseName,
                    tabularchart: this.updateInfo.tabularChar,
                    coursetime: this.updateInfo.couseTime,
                    coursemount: this.updateInfo.courseMount,
                    courseintroduce: this.updateInfo.courseIntroduce,
                    applicablepopulation: this.updateInfo.applicablePopulation,
                    teacherId: this.updateInfo.teacher_id,
                    subscriptionnotice: this.updateInfo.subscriptionNotice
                }
            }).then((res) => {
                console.log(res)
                this.$message({
                    message: '修改成功',
                    type: 'success'
                });
            }).catch((err) => {
                console.log("修改失败");

            })
            this.pageNum = 1
            this.getcourseList(this.pageNum, this.searchInputCourseName, this.inputTeacherIdvalue)
            this.dialogFormVisible2 = false

        },

        handleSelectionChange(val) {
            this.multipleSelection = val;
            console.log("------选中的行------");
            console.log(val);
            console.log(this.multipleSelection)
            console.log("--------------------");
        },

        async deleteCourse(row){
            console.log("deleteRow");
            console.log(row);
            await this.axios.delete("http://localhost:8080/course/delete",{
                params:{
                    i:row.id
                }
            }).then((res)=>{
                console.log(res)
                this.$message({
                    message: '删除成功',
                    type: 'success'
                });
            }).catch((err)=>{
                console.log(err);
                console.log("删除失败");
                
            })
            this.pageNum = 1
            this.getcourseList(this.pageNum, this.searchInputCourseName, this.inputTeacherIdvalue)
            
        },

        async getTeacherList() {
            this.axios.get("http://localhost:8080/course/teacherlist")
                .then((res) => {
                    this.teacherList = res.data.data
                    this.addTeacherList = res.data.data
                    this.updateTeacherList = res.data.data
                    console.log(this.teacherList);
                }).catch((err) => {
                    console.log(err);
                    console.log("请求失败");
                })
        },

        async getcourseList(pageNum, courseName, teaherId) {
            this.axios.get("http://localhost:8080/course/courseListOptions?", {
                params: {
                    PageNum: pageNum,
                    PageSize: 4,
                    courseName: courseName,
                    teacherId: teaherId
                }
            }).then((res) => {
                this.courseList = res.data.data
                this.total = this.courseList[0].total
                console.log(this.courseList);
                
            }).catch((err) => {
                console.log(err);
                console.log("请求失败");
            })
        },

        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.pageNum = val
            this.getcourseList(this.pageNum, this.searchInputCourseName, this.inputTeacherIdvalue)
        },

        search() {
            this.pageNum = 1
            this.getcourseList(this.pageNum, this.searchInputCourseName, this.inputTeacherIdvalue)
        },

        // 添加课程
        async addCourse() {
            await this.axios.post("http://localhost:8080/course/add", {
                coursename: this.addInfo.courseName,
                tabularchart: this.addInfo.tabularChar,
                coursetime: this.addInfo.couseTime,
                coursemount: this.addInfo.courseMount,
                courseintroduce: this.addInfo.courseIntroduce,
                applicablepopulation: this.addInfo.applicablePopulation,
                teacherId: this.addInfo.teacher_id,
                subscriptionnotice: this.addInfo.subscriptionNotice
            }).then((res) => {
                console.log(res)
                this.$message({
                    message: '新增成功',
                    type: 'success'
                });
            }).catch((err) => {
                console.log("添加失败");
            })

            this.pageNum = 1
            this.getcourseList(this.pageNum, this.searchInputCourseName, this.inputTeacherIdvalue)
            this.dialogFormVisible = false
            this.addInfo.courseName = ""
            this.addInfo.tabularChar = ""
            this.addInfo.couseTime = ""
            this.addInfo.courseMount = 0
            this.addInfo.courseIntroduce = ""
            this.addInfo.applicablePopulation = ""
            this.addInfo.teacher_id = -1
            this.addInfo.subscriptionNotice = ""

        }
    }


}
</script>

<style>
.addTableDiv {
    width: 100%;

}

.addTableItem {
    display: flex;
    margin-bottom: 10px;
    line-height: 40px;
    width: 100%;
    flex-wrap: wrap;
}

.addTableItem div {
    margin-left: 5px;
}

.addTableItemLabe {
    width: 10%;
}

.addTableItemInput {
    width: 80%;
}

.pageDiv {
    margin-top: 10px;
}

.operationDiv {
    margin-top: 10px;
    display: flex;
    line-height: 40px;
    flex-wrap: wrap;
    /* 设置弹性容器为自动换行 */
}

.labDiv {
    margin-right: 1%;
}

.serarchDiv {
    margin-right: 2%;
}

.addDiv {
    margin-top: 10px;
    line-height: 40px;
}
</style>